<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0px;
            padding: 0px;
        }
        .outer{
            width: 1519px;
            height: 3000px;
            /* background-color: red; */
            /* border: 1px solid black; */
        }
        .top{
            width: 1519px;
            height: 313px; 
            /* background-color: blue; */
            /* float: right; */
        }
        .top1{
            width: 1519px;
            height: 70px;
            /* background-color: green; */
            display: flex;
            flex-direction: row;
            justify-content: space-between;
        }
        .top_right div:hover{
            color: red;
            cursor:pointer
        }
        .top_right div{
           float: right;
        }

        .top_left{
            width: 142px;
            height: 70px;
            margin-left: 170px;
        } 
        .top_left>img{
            width: 142px;
            height: 70px;
        }
        .top_right div  {
            width: 70px;
            height: 70px;
            /* background-color:black; */
            /* border: 1px solid black; */
            margin-right: 70px;
            margin-top: 25px;
        }     
        
      
        .top2{
            width: 1519px;
            height: 242px;
            overflow: hidden;
        }
        .top2_1{
            animation-name: top2_1;
            animation-duration: 6s;
            animation-iteration-count: infinite;
            animation-timing-function: steps(3);
        }
        .top2_1 div img{
            width: 1519px;
            height: 242px;
            float: left;
        }
        /* .top2_2{
            width: 800px;
            height: 57px;
        }
        .top2_2 img{
            width: 800px;
            height: 57px;
        } */
        @keyframes top2_1 {
            form{
              margin-left: 0px;
            }
            to{
               margin-left: -4557px;
            }   
        }
        .middle{
            width: 1150px;
            height: 660px;          
            margin: 0 auto;
            margin-top: 20px;  
            /* border: 1px solid black; */
        }
        .middle div{
            float: left;
        }
        .middle_1{
            width: 1150px;
            height: 330px;                
            /* border: 1px solid black; */
            display: flex;
            flex-direction: row;
            justify-content: space-between;
           
        }
        .p1{
            width: 330px;
            height: 330px;
            /* border: 1px solid black; */
        }
        .p2{
            width: 330px;
            height: 330px;
            /* border: 1px solid black; */
        }
        .p3{
            width: 330px;
            height: 330px;
            /* border: 1px solid black; */
        }
        .p4{
            width: 330px;
            height: 330px;
            /* border: 1px solid black; */
        }
        .p5{
            width: 330px;
            height: 330px;
            /* border: 1px solid black; */
        }
        .p6{
            width: 330px;
            height: 330px;
            /* border: 1px solid black; */
        }
        .middle_2{
            width: 1150px;
            height: 330px;
            /* border: 1px solid black; */
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            /* background-color: blue; */
        }
        
        .middle div img{
            width: 330px;
            height: 200px;
        } 
        /* .n6{
            text-align: left;
        } */
        .middle_1 div .n6 img{
            width: 14px;
            height: 14px;
            margin-top: 10px;
            margin-right: 50px;
        } 
        
        .middle_1 div .n7 img{
            width: 14px;
            height: 14px;
            margin-top: 10px;
            margin-right: 50px;
        }     
        .middle_1 div .n8 img{
            width: 14px;
            height: 14px;
            margin-top: 10px;
            margin-right: 100px;
        }
        
        .middle_2 div .n9 img{
            width: 14px;
            height: 14px;
            margin-top: 10px;
            margin-right: 100px;
            
        }
        .middle_2 div .n10 img{
            width: 14px;
            height: 14px;
            margin-top: 10px;
            margin-right: 100px;
        }
        .middle_2 div .n11 img{
            width: 14px;
            height: 14px;
            margin-top: 10px;
            margin-right: 100px;
        }
        .middle_1 div .n6{
            width: 372px;
            height: 32px;
            /* align-content: center; */
        }
        .middle_1 div .n7{
            width: 372px;
            height: 32px;
        }
        .middle_1 div .n8{
            width: 372px;
            height: 32px;
        }
        .middle_2 div .n9{
            width: 372px;
            height: 32px;
        }
        .middle_2 div .n10{
            width: 372px;
            height: 32px;
        }
        .middle_2 div .n11{
            width: 372px;
            height: 32px;
            
        }

        ul{
            list-style: none; 
        }
        .middle_1 li:hover{
            color: red;
            cursor:pointer;
        }
        .middle_2 li:hover{
            color: red;
            cursor:pointer;
        }
        .n6:hover{
            cursor:pointer;
        }
        .n7:hover{
            cursor:pointer;
        }
        .n8:hover{
            cursor:pointer;
        }
        .n9:hover{
            cursor:pointer;
        }
        .n10:hover{
            cursor:pointer;
        }
        .n11:hover{
            cursor:pointer;
        }
        .n13:hover{
            cursor:pointer;
        }
        .n14:hover{
            cursor:pointer;
        }
        .n15:hover{
            cursor:pointer;
        }
        .n16:hover{
            cursor:pointer;
        }
        .n17:hover{
            cursor:pointer;
        }
        .n18:hover{
            cursor:pointer;
        }
        .top3{
            width: 760px;
            height: 57px;
            background-color: red;
            margin: 0 auto;
            margin-left: 250px;
            margin-top: 130px; 
            position: absolute;
         }   
         .top3{
            cursor:pointer;
        }
        .foot{
            bottom: 0px;
            right: 0px;
            position: fixed;
        }
        .foot div{
            width: 46px;
            height: 46px;

            
            cursor:pointer;
        
        }
        .n12{
            width: 1150px;
            height: 50px;
            margin: auto;
            text-align: center;
            background-color: thistle;
            
        }
        .n12:hover{
            color: red;
            cursor:pointer;
        }
        .n13 div{
            width: 115px;
            height: 70px;
            float: left;
            margin-left: 240px;
            /* margin: auto;   */
         
        }
        /* .n13 div img{
            float: left;
        } */
        /* .n13{
            float: right: ;;
        } */
        /* .n13 div{
            margin: auto;
            float: left;
        } */
        .n20{
            width: 115px;
            height: 90px;
        }
        .n21{
            width: 87px;
            height: 90px;
        }
        .n22{
            width: 100px;
            height: 90px;
        }
        .n30 {
            width: 1170px;
            height: 40px;
            margin-left: 180px;
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            margin-top: 200px;
        }
        .n31{
            width: 1170px;
            height: 40px;
            margin-left: 180px;
            display: flex;
            flex-direction: row;
            justify-content: space-between;
        }
        .n25{
            width: 1170px;
            height: 211px;
            margin-left: 180px;
            display: flex;
            flex-direction: row;
            justify-content: space-between;
        }
        .n32{
            width: 184px;
            height: 140px;
            margin-left: 1150px;
            margin-top: -50px;
        }
        /* .foot:first-child{
            width: 66px;
            height: 46px;
        } */
        .n40:hover{
            background-color: red;
            cursor:pointer;
        }
    </style>
</head>
<body>
    <div class="outer">
        <div class="top">
            <div class="top1">
                <div class="top_left"><img src="./QQ截图20200723142642.png" alt=""></div>
                <div class="top_right">
                    <div class="n1"><a href="https://passport.meituan.com/account/unitivelogin?service=phoenix&continue=https%3A%2F%2Fminsu.meituan.com%2Fauth%2Fauthenticated%2F%3Fcontinue%3D%252F&risk_partner=93">登录/注册</a></div>
                    <div class="n2"><a href="https://passport.meituan.com/account/unitivelogin?service=phoenix&continue=https%3A%2F%2Fminsu.meituan.com%2Fauth%2Fauthenticated%2F%3Fcontinue%3D%252Fhouse&risk_partner=93">成为房东</a></div>
                    <div class="n3"><a href="https://minsu.meituan.com/about/">下载app</a></div>
                </div>
            </div>
            
            <div class="top2">
                <div class="top2_1">
                    <div><img src="./002.jpg" alt=""></div>
                    <div><img src="./001.jpg" alt=""></div>
                    <div><img src="./003.jpg" alt=""></div>
                </div>
                <div class="top3"><img src="./QQ截图20200809131326.png" alt=""></div>
                <div class="top2_2"><img src="./QQ截图20200809131326.png" alt=""></div>
                
            </div>
        </div>
        <div style="width: 135px;height: 24px;margin-left: 180px;"><img src="./QQ截图20200809201257.png" alt=""></div>
        <div class="middle">
            <div class="middle_1">
                <div class="p1">
                    <div class="n13"><a href="https://minsu.meituan.com/housing/8275354/"><img src="./004.jpg" alt=""></a></div>
                    <div>
                        <ul>
                            <li><span style="font-size: 23px;"><a href="">南京东路外滩环形落地窗海景房</a></span></li>
                            <li>￥233</li>
                        </ul>
                    </div>    
                    <div class="n6"><img src="./QQ截图20200810104033.png" alt="">上海·黄浦区</div>
                </div>
                <div class="p2">
                    <div class="n14"><img src="./005.jpg" alt=""></div>
                    <div>
                        <ul>
                            <li><span style="font-size: 23px;"><a href="">南京西路地铁口美签展会</a></span></li>
                            <li>￥331</li>
                        </ul>
                    </div>
                    <div class="n7"><img src="./QQ截图20200810104033.png" alt="">上海·徐汇区</div>
                </div>  
                <div class="p3">
                    <div class="n15"><img src="./010.jpg" alt=""></div>
                    <div>
                        <ul>
                            <li><span style="font-size: 23px;"><a href="">五原路法式原房</a></span></li>
                            <li>￥323</li>
                        </ul>
                    </div>
                    <div class="n8"><img src="./QQ截图20200810104033.png" alt="">上海·静安区</div>
                </div>
            </div>
            <div class="middle_2">
                <div class="p4">
                    <div class="n16"><img src="./007.jpg" alt=""></div>
                    <div>
                        <ul>
                            <li><span style="font-size: 23px;"><a href="">英式花园洋房</a></span></li>
                            <li>￥216</li>
                        </ul>
                    </div>
                    <div class="n9"><img src="./QQ截图20200810104033.png" alt="">上海·黄浦区</div>
                </div>
                <div class="p5">
                    <div class="n17"><img src="./008.jpg" alt=""></div>
                    <div>
                        <ul>
                            <li><span style="font-size: 23px;"><a href="">弄堂二楼小房间</a></span></li>
                            <li >￥163</li>
                        </ul>
                    </div>
                    <div class="n10"><img src="./QQ截图20200810104033.png" alt="">上海·浦东新区</div>
                </div> 
                <div class="p6">
                    <div class="n19"><img src="./011.jpg" alt=""></div>
                    <div>
                        <ul>
                            <li><span style="font-size: 23px;"><a href="">舒适阁楼双床</a></span></li>
                            <li>￥303</li>
                        </ul>
                    </div>
                    <div class="n11"><img src="./QQ截图20200810104033.png" alt="">上海·黄浦区</div>
                </div>   
            </div>
        </div>
        <div class="bottom">
            <div class="n12"><span style="font-size: 30px;"><a href="https://minsu.meituan.com/suzhou/h6391/">查看更多民宿</a></span></div>
            <div class="n13">
                <div class="n20"><a href="https://minsu.meituan.com/help/trust/#ensure"><img src="./QQ截图1.png" alt=""></a></div>
                <div class="n21"><img src="./QQ截图2.png" alt=""></div>
                <div class="n22"><img src="./QQ截图3.png" alt=""></div>
            </div>
            <div class="n14">
                <div class="n30">
                    <div><a href="">热门城市</a></div>
                    <div><a href="">北京的民宿</a></div>
                    <div><a href="">上海的民宿</a></div>
                    <div><a href="">南京的民宿</a></div>
                    <div><a href="">杭州的民宿</a></div>
                    <div><a href="">厦门的民宿</a></div>
                    <div><a href="">武汉的民宿</a></div>
                    <div><a href="">长沙的民宿</a></div>
                    <div><a href="">广州的民宿</a></div>
                    <div><a href="">深圳的民宿</a></div>
                    <div><a href="">三亚的....</a></div>
                </div>
                <div class="n31">
                    <div><a href="">热门房源</a></div>
                    <div><a href="">有厨具的民宿</a></div>
                    <div><a href="">有洗衣机的民宿</a></div>
                    <div><a href="">有今夜特价的民宿</a></div>
                    <div><a href="">有限时折扣的民宿</a></div>
                    <div><a href="">适合情侣的民宿</a></div>
                    <div><a href="">视野开阔的民宿</a></div>
                    <div><a href="">别墅</a></div>
                    <div><a href="">复式left</a></div>
                    <div><a href="">度假民宿</a></div>
                   
                </div>
                <div class="n25">
                    <div>
                        <div><a href=""><span>公司信息</span></a></div>
                        <div><a href=""><span>关于我们</span></a></div>
                        <div><a href=""><span>工作机会</span></a></div>
                    </div>
                    <div>
                        <div><a href="">网站帮助</a></div>
                        <div><a href="">规则中心</a></div>
                        <div><a href="">网站地图</a></div>
                    </div>
                    <div>
                        <div><a href="">人工客服</a></div>
                        <div><a href="">客服电话400-0660-190</a></div>
                        <div><a href="">登录问题10107888</a></div>
                    </div>
                    <div><img src="./QQ截图二维码.png" alt=""></div>
                </div>     
            </div>
            
        <div class="foot">
            <div><img src="./小程序.png" alt=""></div>
            <div class="n40"><img src="./二维码.png" alt=""></div>
            <div class="n41"><img src="./耳机.png" alt=""></div>
            <div class="n42"><a href="#top"><img src="./箭头.png" alt=""></a></div>
        </div>
    </div>
</body>
</html>